/*
 * @Author: liyongxuan
 * @Date: 2018/2/28
 * @Last Modified by: liyongxuan
 * @Last Modified time: 2018/2/28
 * @description: logo
 */
<template>
    <div>
        <template v-if="itemInfo">
            <el-popover ref="popover1" placement="right" width="500" trigger="hover">
                <div class="bak">{{itemInfo}}</div>
            </el-popover>
            <div v-popover:popover1>
                <img v-if="!item.itemImg && type != 'personal'" class="margin-top" src="../../../static/images/logo.png"/>
                <img v-else :src="showLogo" :width="width" height="115" />
            </div>
        </template>
        <template v-else>
            <div>
                <img v-if="!item.itemImg && type != 'personal'" class="margin-top" src="../../../static/images/logo.png"/>                
                <!-- <i v-if="!item.itemImg && type != 'personal'" class="fa fa-picture-o ca-image-upload"></i> -->
                <img v-else :src="showLogo" :width="width" height="100" />
            </div>
        </template>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data() {
        return {}
    },
    props: {
        item: {
            type: Object,
            default: {}
        },
        // personal 个人中心的头像
        type: {
            type: String,
            default: ''
        }
    },
    computed: {
        showLogo() {
            if (this.item && this.item.itemImg) {
                return this.baseURL + '/file/' + this.item.itemImg + '?X-Token=' + this.$store.state.user.token
            } else {
                if (this.type === 'personal' && !this.item.itemImg) {
                    return require('../../../static/images/null-picture.png')
                }
            }
        },
        itemInfo() {
            if (this.item && this.item.itemInfo) {
                return this.item.itemInfo;
            } else {
                return '';
            }
        },
        width() {
            if (this.type === 'personal') {
                return '100';
            } else {
                return '180';
            }
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ca-image-upload {
    font-size: 60px;
    color: #909090;
    cursor: pointer;
    width: 180px;
    height: 100px;
}
.bak{
    word-wrap: break-word
}
</style>
